<template>
  <div :id="id" ref="PieChartRef" :style="{ height: height, width: width }" />
</template>
<script lang="ts" setup>
import { onMounted, nextTick, watch, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
const props = defineProps({
  id: {
    type: String,
    default: "lineChartId",
  },
  width: {
    type: String,
    default: "100%",
  },
  height: {
    type: String,
    default: "200px",
  },
  option: {
    type: Object,
    required: true,
  }, // option: { dataname , scores }
});

function initChart() {
  let myChart = echarts?.getInstanceByDom(document.getElementById(props.id)!);
  if (myChart === null || myChart === undefined) {
    myChart = echarts.init(document.getElementById(props.id));
  }

  let indicator = [];
  if (props.option?.dataname?.length > 0) {
    for (var i = 0; i < props.option?.dataname?.length; i++) {
      if (props.option?.dataname?.[i]) {
        indicator.push({
          name: props.option.dataname[i],
          max: 100,
        });
      }
    }
  }

  const option = {
    title: {
      // text: [`{span|${num}分}`].join(""),
      bottom: "center",
      left: "center",
      textStyle: {
        rich: {
          span: {
            fontSize: 40,
            color: "#fff",
          },
        },
      },
    },
    radar: {
      center: ["50%", "50%"],
      radius: "70%",
      axisLine: {
        show: true,
        lineStyle: {
          color: "#ebeef3",
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#ebeef3",
        },
      },
      axisName: {
        formatter: function (name: string) {
          const i = props.option?.dataname?.indexOf(name);
          return `{name1|${props.option?.scores[i]}}\n{name3|${name}}`;
        },
        lineHeight: 20,
        rich: {
          name1: {
            fontSize: 14,
            color: "#000",
            align: "center",
          },
          name2: {
            fontSize: 14,
            color: "#DFB48F",
            align: "center",
          },
          name3: {
            fontSize: 14,
            color: "#606266",
            align: "center",
          },
        },
      },
      indicator: indicator,
    },

    series: [
      {
        type: "radar",
        symbol: "circle",
        symbolSize: 6,
        areaStyle: {
          color: {
            type: "radial",
            x: 0.5,
            y: 0.5,
            r: 0.5,
            colorStops: [
              {
                offset: 0,
                color: "rgba(137, 190, 252, 0.05)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(81, 137, 248, 0.3)", // 100% 处的颜色
              },
            ],
          },
        },
        lineStyle: {
          width: 2,
        },
        data: props.option?.scores && [props.option?.scores],
      },
    ],
  };

  // 渲染数据
  myChart.setOption(option, true);
}

function changeChartSize() {
  echarts.getInstanceByDom(document.getElementById(props.id)!)?.resize();
}

watch(
  () => props.option,
  (val) => {
    if (JSON.stringify(val) !== "{}") {
      nextTick(() => {
        initChart();
      });
    }
  }
);

onMounted(() => {
  nextTick(() => {
    initChart();
    window.addEventListener("resize", changeChartSize);
  });
});

onBeforeUnmount(() => {
  echarts.getInstanceByDom(document.getElementById(props.id)!)?.dispose();
  window.removeEventListener("resize", changeChartSize);
});
</script>
<style lang="scss" scoped></style>
